<template>
  <a-row style="padding: 20px">
    <a-col span="10">
      <h3>列表区域</h3>
      <draggable class="dragArea list-group" item-key="id" :list="list1" :sort="false" animation="300" group="people">
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </a-col>
    <a-col span="10" offset="4">
      <h3>目标区域</h3>
      <draggable class="dragArea list-group" item-key="id" :list="list2" group="people" animation="300">
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import draggable from "vuedraggable";
import { ref } from "vue";

const list1 = ref([
  { name: "组件1", id: 1 },
  { name: "组件2", id: 2 },
  { name: "组件3", id: 3 },
  { name: "组件4", id: 4 }
]);
const list2 = ref([
  { name: "画布组件1", id: 11 },
  { name: "画布组件2", id: 12 },
  { name: "画布组件3", id: 13 },
  { name: "画布组件4", id: 14 }
]);
</script>

<style scoped></style>

